<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>树形菜单页面</title>
  <style>
    :root{--bg:#fff;--panel:#f8f8f8;--text:#111;--muted:#666}
    body{font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif; background:var(--bg); color:var(--text); padding:24px}
    .window{width:320px;border:1px solid #bbb;background:#eee;box-shadow:0 0 0 3px #f6f6f6 inset;padding:6px}
    .titlebar{background:#2b74d6;color:#fff;padding:6px 8px;font-weight:700;display:flex;align-items:center;gap:8px}
    .titlebar .icon{width:14px;height:14px;background:#fff;border-radius:2px}
    .toolbar{background:#f1f1f1;padding:6px 8px;border-bottom:1px solid #ddd;font-size:13px;color:#333}
    h1{font-size:18px;margin:12px 10px;color:#111}
    .tree{list-style:none;padding-left:18px;margin:0}
    .node{margin:6px 0;line-height:1.2}
    .label{cursor:pointer;display:inline-flex;align-items:center;gap:8px}
    /* caret */
    .label .caret{width:12px;display:inline-block;text-align:center;font-size:12px;color:#333}
    .label .icon-fold{width:10px;height:10px;border-radius:2px;background:#000;display:inline-block}
    .node .name{font-size:14px}
    /* nested lists hidden by default */
    .node > ul{display:none;margin-left:16px;padding-left:8px;border-left:1px dotted rgba(0,0,0,0.06)}
    .node.open > ul{display:block}
    /* file bullet (small square) */
    .file .bullet{width:8px;height:8px;background:#111;display:inline-block;border-radius:1px}
    /* visual tweaks to resemble the screenshot */
    .footer{font-size:12px;color:var(--muted);margin-top:8px;padding:6px}
    /* make caret rotate when open */
    .node.open > .label .caret{transform:rotate(90deg)}
    .label .caret{transition:transform .12s ease}
  </style>
</head>
<body>
  <div class="window">
    <div class="titlebar"><div class="icon"></div>树形菜单</div>
    <div class="toolbar">文件(F)  编辑(E)  查看(V)  收藏夹</div>
    <h1>我的电脑文件列表</h1>

    <ul class="tree">
      <li class="node folder open">
        <div class="label"><span class="caret">▸</span><span class="name">我的电脑</span></div>
        <ul>
          <li class="node folder">
            <div class="label"><span class="caret">▸</span><span class="name">本地磁盘(C:)</span></div>
            <ul>
              <li class="node file"><div class="label"><span class="bullet"></span><span class="name">我的文档</span></div></li>
              <li class="node file"><div class="label"><span class="bullet"></span><span class="name">我的收藏</span></div></li>
            </ul>
          </li>
          <li class="node folder">
            <div class="label"><span class="caret">▸</span><span class="name">本地磁盘(D:)</span></div>
            <ul>
              <li class="node file"><div class="label"><span class="bullet"></span><span class="name">我的游戏</span></div></li>
              <li class="node file"><div class="label"><span class="bullet"></span><span class="name">我的资料</span></div></li>
              <li class="node file"><div class="label"><span class="bullet"></span><span class="name">我的电影</span></div></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

    <div class="footer">计算机 | 保护视图 | 100%</div>
  </div>

  <script>
    // 点击文件夹标签切换 open 类，控制子列表显示
    document.querySelectorAll('.node.folder > .label').forEach(function(lbl){
      lbl.addEventListener('click', function(e){
        var node = lbl.parentElement;
        node.classList.toggle('open');
        var caret = lbl.querySelector('.caret');
        if(node.classList.contains('open')) caret.textContent = '▾'; else caret.textContent = '▸';
      });
    });

    // 初始化 caret 符号（根节点为展开）
    document.querySelectorAll('.node').forEach(function(n){
      var lbl = n.querySelector('.label .caret');
      if(!lbl) return;
      lbl.textContent = n.classList.contains('open') ? '▾' : '▸';
    });
  </script>
</body>
</html>
